@import './values';

.clear::before {
  content: '';
  display:table;
}

.no-resize {
  resize: none;

  textarea { resize: none; }
}

.block { display: block; }
.inline-block { display: inline-block; }

.container-fluid { padding: 0 1rem; }

.under-header-fixed-container {
  position: fixed;
  z-index: $header-z-index - 2;
  left: 0; right: 0;

  .page-title-holder {
    margin-top: -$header-shadow-blur;
    padding-top: $header-shadow-blur;
  }
}
#header-reminder {
  position: relative;
  z-index: $header-z-index - 1;
}

.main-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;

  &.container-limited { max-width: 60rem; }
}

.under-header-fixed-container + .main-container { margin-top: 61px; }

.page-holder {
  padding-bottom: 5rem;
  @media screen and (max-width: $sm) { padding-bottom: 2rem; }
}
.page-title-holder {
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
  display: flex;
  align-items: center;

  .page-title { margin: 1rem 0; }
}

.easy-container-4 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.easy-container-mini {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.easy-container-min {
  padding-top: .625rem;
  padding-bottom: .625rem;
}
.easy-container {
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.easy-container-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.easy-container-20 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.easy-container-x2 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.border-C0C4CC { border-color: #C0C4CC; }

.easy-container-min {

  &.issues {
    @extend .border-bottom;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    background-color: #fafafa;
  }
}

.no-data {
  height: 2.5rem;
  line-height: 2.5rem;
  color: #909399;
  text-align: center;
}

/* 自定义的列表，如空间列表 */
.custom-table {

  .custom-table-item:hover {
    background-color: #ecf5ff;
  }

  p { margin: 0; }

  .easy-container,
  .easy-container-min{
    border-bottom: 1px solid #eee;

    .cell { padding: 0 0.625rem; }
    .title+.el-tag { margin-left: 0.625rem; }
    .el-tag+.el-tag { margin-left: 0.3125rem; }
  }

  .list-icons {
    .icon-holder:not(:last-child) { margin-right: 1rem; }
    .icon:not(:last-child) { margin-right: .25rem; }
  }

  &.boxes-list {

    .list-item {
      margin-top: 1rem;
      background-color: #fff;
      padding: .875rem 1.5rem 1.25rem;

      &:hover {
        box-shadow: 0 0 10px 0 #e8e8e8;
        border: 1px solid #e9e9e9;
      }
    }
  }
}

.paper-card {
  border: 1px solid #e6e6e6;
  box-shadow: 0 0 4px 0 #f0f0f0;

  &.radius-2 { border-radius: 2px; }
  &.hover:hover {
    box-shadow: 0 0 10px 0 #e8e8e8;
    border: 1px solid #e9e9e9;
  }
}

.custom-table.cell-p-1 .easy-container {
  .cell:first-child { padding-left: 1rem; }
  .cell:last-child { padding-right: 1rem; }
}

.custom-select-item {
  line-height: 4rem;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  cursor: pointer;
  transition: background-color 100ms linear, box-shadow 100ms linear;

  &+.custom-select-item {
    margin-top: .5rem;
  }

  &:hover {
    background-color: #fdfdfd;
    box-shadow: inset 2px 0 0 0 #dbdbdb;
    cursor: pointer;
  }

  &.is-active {
    background: #e9f3fc;
    border-color: #63a6e9;
    box-shadow: inset 4px 0 0 0 #1f75cb;
  }
}

.float-left { float: left; }
.float-right { float: right; }

.m-t-0 { margin-top: 0 !important; }
.m-t-8 { margin-top: .5rem; }
.m-t-10 { margin-top: .625rem; }
.m-t-16 { margin-top: 1rem; }
.m-t-22 { margin-top: 1.375rem; }
.m-t-24 { margin-top: 1.5rem; }
.m-r-5 { margin-right: .3125rem; }
.m-r-10 { margin-right: .625rem; }
.m-r-16 { margin-right: 1rem !important; }
.m-r-32 { margin-right: 2rem !important; }
.m-b-4 { margin-bottom: 4px; }
.m-b-8 { margin-bottom: .5rem; }
.m-b-10 { margin-bottom: .625rem; }
.m-b-24 { margin-bottom: 1.5rem; }
.m-l-auto { margin-left: auto !important; }
.m-l-5 { margin-left: .3125rem; }
.m-l-10 { margin-left: .625rem; }
.m-l-14 { margin-left: .875rem; }
.m-l-16 { margin-left: 1rem !important; }
.m-l-30 { margin-left: 1.875rem; } // el-radio 右边放东西的时候，和 el-radio 相间的距离一样
.m-l-60 { margin-left: 3.75rem; } // el-radio 右边放东西的时候

.m-x-16 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.m-y-10 {
  margin-top: .625rem;
  margin-bottom: .625rem;
}

.p-t-22 { padding-top: 1.375rem; }
.p-b-0 { padding-bottom: 0 !important; }
.p-b-4 { padding-bottom: .25rem; }
.p-b-14 { padding-bottom: .875rem; }
.p-l-16 { padding-left: 1rem; }
.p-r-16 { padding-right: 1rem; }
.p-r-30 { padding-right: 1.875rem; }
.padding { padding: 1rem; }
.padding-10 { padding: .625rem; }

.p-x-8 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.p-x-10 {
  padding-left: .625rem;
  padding-right: .625rem;
}
.p-x-16 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.p-x-46 {
  padding-left: 2.875rem;
  padding-right: 2.875rem;
}

.p-y-2 {
  padding-top: .125rem;
  padding-bottom: .125rem;
}
.p-y-8 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.max-width-300 { max-width: 18.75rem; }
.min-w-0 { min-width: 0; }

.pointer { cursor: pointer; }
.not-allowed { cursor: not-allowed; }
.cursor-move { cursor: move; }

/* 有头像或封面设置的地方 */
.setting-avatar {
  display: flex;

  .avatar { margin-right: 1rem; }
  .options {}

  @media screen and (max-width: $ssm) { display: block; }
}

.no-border-bottom { border-bottom: none !important; }

.form-border {
  padding: 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  &+.form-border { margin-top: 1rem; }
}

.sub-label { width: 5rem; }

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #dfdfdf;
  border-radius: .25rem;
  overflow: hidden;

  .card-header {
    display: flex;
    align-items: center;
    padding: .375rem 1rem;
    background-color: #fafafa;
    border-bottom: 1px solid #dfdfdf;

    .controls-container {
      display: flex;
      .el-input { width: unset; }
    }
  }

  .card-content {
    padding-left: 1rem;
    padding-right: 1rem;

    &.card-list { min-height: 18.25rem; }
  }
  .card-list {
    .card-list-item {
      margin: 0 -.375rem;
      padding: 0 .375rem;
      line-height: 2;
      border-radius: 4px;
      &:hover { background-color: #fafafa; }
      &:first-of-type { margin-top: .375rem; }
      &:last-of-type { margin-bottom: .375rem; }
    }
  }

  .custom-table .easy-container:last-of-type { border-bottom: none; }
  .el-table {
    &::before { height: 0; }
    .el-table__row:last-of-type td { border-bottom: none; }
  }
}

.community-card + .community-card { margin-top: 1rem; }
.community-card.mini + .community-card.mini { margin-top: .5rem; }

.hover-box:hover .hover-box-link { text-decoration: underline; }

.hover-primary:hover { color: #5cb6ff; }
.hover-link:hover { color: #175199; }

.no-limit-height { height: unset; }

.homepage-card {
  width: 16rem;
  text-align: center;
}

// 这个东西用在table里面
//.hover-show {
//  display: none;
//  .el-link { vertical-align: unset; }
//}
//.el-table__row:hover .hover-show { display: block; }

@import './element-ui_reset/el-autocomplete';
@import './element-ui_reset/el-button';
@import './element-ui_reset/el-collapse';
@import './element-ui_reset/el-date-editor';
@import './element-ui_reset/el-dialog';
@import './element-ui_reset/el-divider';
@import './element-ui_reset/el-dropdown';
@import './element-ui_reset/el-form';
@import './element-ui_reset/el-input';
@import './element-ui_reset/el-menu';
@import './element-ui_reset/el-message-box';
@import './element-ui_reset/el-pagination';
@import './element-ui_reset/el-table';
@import './element-ui_reset/el-tabs';
@import './element-ui_reset/el-tag';

.el-loading-mask {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .el-loading-spinner {
    top: unset;
    margin-top: unset;
  }
}

.el-breadcrumb { line-height: 1.5; }
#breadcrumb {
  min-height: 3rem;
  border-bottom: 1px solid #e5e5e5;

  .icon {
    margin-left: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #606266;

    &+.el-breadcrumb {
      padding-left: 1rem;
      border-left: 1px solid #d6d6d6;
    }
  }
}

.el-avatar--square { border-radius: 8px; }

.is-light.tooltip-as-title {
  border: 1px solid #e5e5e5;

  &[x-placement^=buttom] .popper__arrow,
  &[x-placement^=buttom] .popper__arrow::after { border-color: #e5e5e5; }
}

.space-good-badge .el-badge__content.el-badge__content--undefined.is-fixed {
  padding-top: 1px;
  padding-bottom: 1px;
  right: 62px;
}
.el-badge__content.el-badge__content--undefined { background-color: #ff0000; }

.resize-line {
  user-select: none;
  margin: .5em 16px .5em 8px;
  border-left: 2px solid #e4e7ed;
  cursor: ew-resize;
  &:hover { border-left: 2px dashed skyblue; }
}

.bg-fff { background-color: #fff; }
.bg-fafafa { background-color: #fafafa; }

// tinymce 插入代码宽度
.tox .tox-dialog {
  @media screen and (min-width: $sm) { max-width: 60% !important; }
}

@import './questionnaire';
